- 综合排序
- 最热优先
- 最新优先
- 来自专栏踏浪的文章
react项目预渲染开发
react越来越火了，是开react开发的人员而是越来越多。但是因为单页应用SEO的问题，我们也不得不去解决这个问题。不管是哪里，都提供了两种方案，一种是SSR服务端渲染，另一种则是预渲染方式。 什么是预渲染 在一般的react项目中（比如使用create-react-app创建的项目），我们在最后打包的时候只会生成一个HTML，JS与CSS文件，或许你会采用一些方法，比如公共文件拆分，路由懒加载等等生成多个文件 怎么使用预渲染 开发react项目的时候，一般都是结合者webpack使用的。目前用的最多的预渲染的方法，就是使用webpack插件prerender-spa-plugin。 需要注意的是： 当项目正常运行，同时包含多个路由的时候，当我们在除了首页以外的其他的目录刷新页面的时候都是404，这是因为服务器的配置问题。本地这里无法实现。 开发的时候必须使用 History 路由而不能使用 Hash 路由。
2.4K21发布于 2019-11-28 - 来自专栏大前端（横向跨端 & 纵向全栈）
React项目前端开发总结
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享! 1. 使用技术：react＋react-router + react-redux + antd 2. 请求方法封装 ? 调用方法 ? 3. 破解反盗链 ? 4. 配置打包生产环境与测试环境 ? Redux状态管理 在大型项目中，react中的组件嵌套及跨级是非常频繁的，而react的数据本身是单向数据流，这样组件之间传递数据非常麻烦，Redux最主要是用作应用状态的管理，用于实现多级组件之前的数据共享 图片裁剪插件react-cropper的使用 ? 12. 前端项目工程化与模块化的心得 (1). 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系） (2). 制定项目开发规范(ESLint规范) (4). 模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例) (5).
1.9K20发布于 2020-11-26 - 来自专栏云开发
如何在云开发部署React项目
安装云开发 cli 工具 和 React脚手架 在配置好 NodeJs环境后，执行如下命令，安装云开发 cli 工具以及 React脚手架： image.png image.png 本地初始化一个React image.png 在浏览器中打开localhost:3000，可以看到React的界面，这样说明成功完成了本地开发的项目搭建 image.png 创建云开发环境 创建一个云开发环境用来部署React image.png 现在我们通过云开发的CLI来完成React项目的部署。 ， image.png 确认授权后出现下图的界面，证明登陆成功了，同时有个小 tips，就是 cloudbase 可以使用简写命令 tcb image.png 打包React项目并部署 回到React 项目目录中执行yarn build对项目进行打包，React脚手架将会默认将文件打包到build的目录下 image.png 打包完成后，进入到build后的目录执行如下命令来进行部署，envID需要替换成自己的
2.8K40发布于 2020-04-13 - 来自专栏全栈程序员必看
react项目实战教程(react项目实战)
文章目录 项目实战前的准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App 路由 1-5 路由的懒加载 项目实战前的准备工作 React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 在项目根目录src文件下创建views文件夹 然后在views文件夹里创建所需要页面, from 'react'; import ReactDOM from 'react-dom'; import App from '. , { Component } from 'react' import { admainRoute} from ".
3.1K50编辑于 2022-07-28 - 来自专栏main方法
React开发环境搭建、项目创建、命令使用
文章目录 前言 一、Node.js下载安装 二、创建React项目 三、React项目常用npm命令使用 总结 ---- 前言 由于项目组前端紧缺的原因，一个后端开发安排了前端开发任务，之前有用过VUE 开发过后端页面，这么说来还是有经验的，借此记录一下React开发环境搭建过程。 二、创建React项目 ① 安装创建React项目的模块cnpm install -g create-react-app ? ② 切换到项目空间目录，创建React项目 react-demo，输入创建命令create-react-app react-demo在当前目录下创建。 ? npm run build 打包构建项目（构建成静态文件） ---- 总结 本章详细介绍从React环境搭建到项目创建以及常用命令使用说明，这些都是准备学习、开发React必需要掌握的技能，所谓磨刀不误砍柴功就是这么个道理
5.6K10发布于 2020-12-07 - 来自专栏知道一点点
react项目搭建
1.全局安装脚手架 npm install -g create-react-app 2、创建项目，安装依赖 create-react-app my-react-app 3、进入项目 cd my-react-app 4、启动项目 npm start 5.首先安装路由组件：react-router-dom npm install react-router-dom --save-dev 6.安装 redux 的第三方模块 ： npm install redux --save npm install react-redux --save 7.安装axios npm i axios --s 8.安装 antd npm i antd
61011发布于 2020-08-06 - 来自专栏前端人人
React项目配置5(引入MockJs,实现假接口开发)
1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口) ---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18 7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增) 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 产品把需求文档、原型搞好了，UI 设计图也搞好了，该开发了！ 也有的是前端写接口文档，后端照着文档开发，但很少这种情况，目前国内还是后端老大！ 接口设计完了，但是后端开发还需要一些时间。前端需要调试咋办？前端闲着？如果你想闲着就先闲着！
5.3K62发布于 2018-04-11 - 来自专栏ShanSan的云原生之路
React+Flask打造前后端分离项目开发环境
碰巧最近React玩得多，撸一篇文章纪念一下开发环境的搭建。? 开篇两问： 什么是React？ ：Windows+Flask+React+Git Bash+vscode Backend-Flask 个人比较喜欢用CLI，So，项目开发依赖使用virtualenv+pip管理，pipenv也还行 # 1、安装virtualenv pip install virtualenv # 2、为项目（Flask_React）创建虚拟环境->env virtualenv env # 3、激活虚拟环境env Frontend-React 前端React应用的开发环境使用官方提供的脚手架create-react-app搭建。 # 1、安装脚手架 npm install -g create-react-app # 2、为Flask_React项目创建React App->frontend create-react-app frontend
7.2K40发布于 2020-07-06 - ); } } export default App; 编译生产环境的项目 // 编译项目，会在项目目录下生成一个 build 的文件夹。 npm run build // 安装 pushstate-server 用于将已经编译好的项目部署 npm install -g pushstate-server // 将编译项目运行在本地查看效果 浏览器访问 http://0.0.0.0:9000 后就能看到编译后的测试项目了。来自专栏jiajia_deng
React 学习笔记之创建 React 项目
安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules
46730编辑于 2023-10-21
React 学习笔记之创建 React 项目
安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules
React 项目精进技巧
1、工程化实践 umi+dva作为底层框架，Ant Design Mobile为 UI 组件库，是蚂蚁金服推崇的的react项目最佳实践，具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等方便一线开发者的功能，部分功能代码可以参考Ant Design pro，目录结构预览如下 2、通用组件 ErrorBoundary 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃 ，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界：错误边界 – React 懒加载 // index.js import React, { Component, lazy, Suspense } from 'react'; export default class Index extends Component { constructor(props) { super(props _renderLazy()} </Suspense>
react项目打包优化
新公司所有的项目基本上都是使用 react 进行开发，之前的工程师是自己使用 webpack 搭建的项目，因为涉及到的东西不多，而且存在一些问题，已经启用。 同时因为项目时间原因没有太多时间自己搭建，而且自己较懒，所以选择了使用 create-react-app 进行项目的开发。 其实开发还是很简单的，主要就是优化的问题，这篇文章主要就是讲关于页面优化的问题，同时也是为了记录一下，避免下次使用的时候在到处找（因为之前写过，最近一次项目又去找之前的配置去了） ? 路由懒加载 使用react开发一般使用的路由模块都是react-router-dom这个插件。当然，如果你使用其他的插件，我想应该也是可以的，不过具体的用法可能需要你自己探索。 使用SSR渲染 使用SSR渲染不仅可以对SEO优化有一定的帮助，同时，还可以对react项目首屏优化的项目有一定的优化作用，所以，如果有需要，可以采用SSR渲染的模式进行开发。
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? 那么恭喜你，你可以正常开发 React 项目了。 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 ” 上述是针对项目做了一些业务开发上的配置与约定，各位同学可以根据自己团队中的规定与喜好行修改。 其他配置 这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。 src/*" ] }, } “其中 antd-mobile 可以自行替换成 antd，包括 postcss 也可以根据自己的喜好替换 ” 通过上述的简单改造，此时已经可以进行正常的小项目开发了
nginx部署react项目
1.build项目 build注意要配置webpack的webpack.config.prod.js文件，生产环境的配置（我是使用的less，所以加了个less的loader） yarn build 2
React Native 项目实战
本文以 Twitter 工程师 Bonnie Eisenman 撰写的 Learning React Native 一书的第九章内容为蓝本，总结了 React Native 项目实践的一些经验。 ? 项目组织结构 所有的新增文件均放在项目根目录下的 src 里，主要有包含各页面的 components 子目录、数据模型的 data 子目录、负责数据存取的 stores 子目录、公共样式定义 styles 案例项目简介 作者提供的示例项目包含三个页面，包含多副牌（Deck）的列表页、为选中的某副牌增加一张卡牌（Card）的页面、为某张卡牌选择答案（Review）的页面。 页面开发 Deck 列表页 数据建模 在 React Native 项目试点过程中，尚不熟悉 JavaScript 的类相关语法。 Tamic开发社区 专业高水准的移动社区 Android & iOS 长按二维码关注
React项目依赖升级
当前问题 现在编译时间过长,镜像构建时长就达到了20分钟+ 通过项目依赖升级后,镜像构建时长大约3-5分钟 修改内容 之前的技术方案:roadhog(2.x)+antd(3.x)+React(16.x )+dva(2.x) 现在的技术方案:[Create React App]craco(7.x)+antd(5.x)+React(18.x)+react-redux(9.x)+react-router(6 default connect(({ user, moon }) => ({ user, moon }))(Form.create()(RecordList)); 所以使用新版antd+redux来进行替换 项目结构 跳转页面 import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate(URL); // URL要跳转的地址 查看当前url import { useLocation } from 'react-router-dom'; const location = useLocation(
创建React + Ts项目
一、安装react+ts npx create-react-app my-app --template typescript 二、安装eslint代码检测 yarn eslint npx eslint --init eslint初始化后会出现三个项目，根据项目而定 1、使用什么样的eslint？ (选择1) React Vue.js None of these 4、项目使用Ts？(Yes) Does your project use TypeScript? (浏览器) Browser // 浏览器 Node // node环境 6、如何定义项目定义样式？ (Yes，yarn) npm yarn pnpm 安装完成后会在项目根目录生成.eslitrc.js文件，然后改一下规则(可以根据自己需求增减规则) module.exports = { env:
react项目报错集锦
Warning: Can’t perform a React state update on an unmounted component. 下面是代码
import React, { Component } from 'react'
import Avatar from '@img/common/avatar.jpeg'
import Stance return (
)
}
}
export default CusImage
react-dom.development.js See https://fb.me/react-unsafe-component-lifecycles for details.
? 解决方案
在 react 16.8 之后的版本中，修改了一下生命周期，移除了一些方法，componentWillMount就是其中一个。
nginx部署React项目
nignx是一款非常优秀的服务器软件，前端工程师在开发完项目后，通常要将项目部署到服务器，我在部署项目时用的就是nginx。 今天跟大家分享一下用nginx部署前端项目的一些经验。 React项目开发完成后，需要运行 build指令进行打包，打包完成后得到打包的文件，然后将这些文件部署到服务器。 localhost; #charset koi8-r; #access_log logs/host.access.log main; #vue或者React 终于写完了，给大家总结一下： 1、在项目部署前，前端打包好的项目必须上传到服务器，文中介绍了两种方式，一种直接上传打包好的数据，一种在服务器将整个项目克隆，在服务器打包。 以上便是用nginx部署React项目涉及到的知识点，如果你有什么疑问或者建议欢迎留言。 引用资料 https://segmentfault.com/a/1190000020753046?
React 折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4React16antd等)
的switch跳转 import React, { Component } from 'react'; import { hot } from 'react-hot-loader'; import DevTools /> </Switch> {/**这里是开启了开发模式下显示 v4的写法 export default hot(module)(App); 复制代码 ---- 问题四: 加快开发模式下的编译,以及常规的美化输出 用了happypack来加快了js,css的便以速度 (多进程); 给css也开启了tree shaking 我这个项目没有引入less或sass,用styled-components@4来写样式 webpack.base.config.js const (error); } ); 复制代码 ---- 总结 写完了整个后台管理系统,发现mobx并没有想象中的好用; 看到阿里的umi已经2.x了(应该挺稳定了),准备用这个umi+dva重写整个项目
